<template>
	<view class="tab-bar-container ">
		<view class="tab-bar-header flex-center">
			<image src="../../../static/img/search.png" mode="" class="search-img"></image>
			<image src="../../../static/img/live-broadcast.png" mode="" class="live-broadcast-img"></image>
		</view>
		<view class="tab-bar-content flex-between">
			<view class="select-item" v-for="(item,index) in tab_bar_dataset" :key="index"
				@click="handleSelectClick($event,index)">
				<text :style="index==2? 'color: #eede1c;':''"
					:class="selected==index?'select-item-active':''">{{item.text}}</text>
				<view class="select-item-bottom-bar" v-show="selected==index?true:false" />
			</view>
			<view>
				<!-- 右侧开关 -->
				<switch checked color="#027b01" style="transform:scale(0.7)" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['selected'],
		data() {
			return {
				tab_bar_dataset: [{
						text: '人才',
					},
					{
						text: '雇主',
					},
					{
						text: '合伙人',
					},
					{
						text: '推荐',
					},
					{
						text: '关注',
					}
				],
			}
		},
		methods: {
			handleSelectClick(e, index) {
				this.$emit('changeHomeCurrent', index)
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar-container {
		position: relative;
		z-index: 1;

		.tab-bar-header {
			padding: 20rpx 30rpx;
			z-index: 1;

			.search-img {
				width: 35rpx;
				height: 35rpx;
				margin-right: 50rpx;
			}

			.live-broadcast-img {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.tab-bar-content {
			padding: 10rpx 20rpx;
			font-size: 30rpx;

			.select-item {
				position: relative;
				padding: 10rpx 0;

				.select-item-active {
					font-size: 35rpx;
				}

				.select-item-bottom-bar {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 50rpx;
					height: 5rpx;
					border-radius: 5rpx;
					background-color: #fff;
				}
			}
		}
	}
</style>
